import React, { Component } from 'react';
import { 
  List, 
  Checkbox, 
  InputItem,
  Stepper,
  Button,
  NavBar,
  Icon,
} from 'antd-mobile';
import { observer } from 'mobx-react';

import history from '../../components/History'; //用来做路由跳转
import Select from '../../components/Select';
import Order from '../../containers/Order';

import Account from '../../models/account.js';
import './index.css';


const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

@observer
class Accounting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sigleTotal: 0,
      total: 0,
    }
  }
  onChange = (val,checked) => {
    // checked = !checked;
    // if(checked) {
    //   this.setState({
    //     total: total + 
    //   })
    // }
  }

  getSinglePrice = (val, s) => {

    //默认指定数值为0
    if (!val) {
      val = 0;
    }

    let arr = [], t = 0, sum = 0;
    s.count = val;
    // 遍历每一项，用价格去乘单价；
    Account.data.categories.map((d) => {
      t = d.count * d.single_price;
      arr.push(t);
    })
    arr.forEach((item, index) => {
      sum += item;
    })
    console.log(sum);
    Account.data.total = sum;


  
  }

  componentDidMount() {
    Account.getFetch();
    console.log(this.props.hidden);
  }
  getTotal() {
    // const { total, categories } = Account.data;
    // console.log(total);
    let that = this;
    Account.fetchTotal().then(() => {
      if (Account.data.isGoOrder) {
        history.push('/order')
      }
    });
  }
  render() {
    const { total, categories, table_lists } = Account.data;
    return (<div style={{ marginBottom: '46px' }}>
      <NavBar
        style={{backgroundColor: "#B91818"}}
        icon={this.props.history ? <Icon type="left" /> : null}
        onLeftClick={() => window.history.back(-1)}
      >
        结算
      </NavBar>
      <Select arr={table_lists} />
      {
        categories.length != 0 
        ? 
        <List renderHeader={() => '彪锅串串'} className="biao-list">
        {
          categories.map(i => (
                  // <CheckboxItem key={i.id}>
                  //     { i.name }
                  //   <InputItem
                  //     type="number"
                  //     placeholder="数量"
                  //     clear
                  //     onChange={(v) => this.getSinglePrice(v, i)}
                  //   />

                  // </CheckboxItem>
                  <List.Item
                    wrap
                    extra={
                      <Stepper
                        style={{ width: '100%', minWidth: '100px',float: 'left' }}
                        showNumber
                        min={0}
                        defaultValue={0}
                        onChange = {(v) => this.getSinglePrice(v, i)}
                      />}
                    key={i.id}
                  >
                  { i.name }
                  </List.Item>
                ))
        }
      </List>
      : 
      <div class="dig-block"> 
        <span> 暂无数据！ </span>
      </div>
    }
      
      <div className="footer-block">
        <Button type="ghost" size="small" inline className="footer-btn" onClick={this.getTotal}>提交订单</Button>
        <span> 合计： </span>
        <span style={{marginRight: '10px'}}> { total } </span>
      </div>
    </div>);
  }
}

export default Accounting;